<template>
    <div>
     <header>
         <i @click="back" class="iconfont">&#xe663;</i>
         <p>个人资料</p>
         
     </header>
     <ul>
         <li>
             <p>头像</p>
             <i class="iconfont">&#xe601;</i>
         </li>
         
         <li>
             <p>账号</p>
             <i class="iconfont">&#xe601;</i>
         </li>
          <li>
             <p>手机号</p>
             <i class="iconfont">&#xe601;</i>
         </li>
         <li>
             <p>昵称</p>
             <i class="iconfont">&#xe601;</i>
         </li>
         <li>
             <p>个人简介</p>
             <i class="iconfont">&#xe601;</i>
         </li>
         <li>
             <p>收货地址</p>
             <i class="iconfont">&#xe601;</i>
         </li>
     </ul>
     <footer>
         <button>退出登录</button>
     </footer>
     
    </div>
</template>

<script>
export default {
    name: '',
    data(){
        return{
             indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        }
    },
    methods:{
        back(){
            this.$router.go(-1);
        }
    }
}
</script>

<style scoped>
header{
    position: relative;
    width: 100vw;
    padding: 2vh 0;
    text-align: center;
    background-image: linear-gradient(to right top,rgba(193, 218, 82, 0.884),rgb(174, 0, 255),blue);
}
header>i{
  position: absolute;
  left: 5vw;
}
ul{
    width: 94vw;
    padding:0 3vw;
    margin: 4vh auto;
    background-color: white;

}
ul li{
    width: 100%;
    display: flex;
    padding: 2.5vh 0;
    position: relative;
    border-bottom: 1px solid rgb(224, 226, 221);
}
li i{
    position: absolute;
    right: 2vw;
}
footer{
    width: 90vw;
    padding: 2.4vh 5vw;
}
footer button{
    width: 90vw;
    color: white;
    border: none;
    outline: none;
    padding: 1.8vh 0;
    /* background-color: red; */
    background-image: linear-gradient(to right top,rgb(221, 38, 151),#0f1de7,rgb(255, 208, 0));
}
footer button:hover{
     background-color: red;
        cursor: pointer;
}
</style>